<template>
    <el-drawer custom-class="mi_drawer" v-bind="$attrs" :size="realSize">

        <template #title>
            <slot name="title"></slot>
        </template>

        <el-scrollbar>
            <slot></slot>
        </el-scrollbar>

        <template #footer>
            <slot name="footer"></slot>
        </template>

    </el-drawer>

</template>

<script setup lang="ts">

import {computed, defineProps} from "vue";

const props = defineProps({
    size:{type:[Number,String],default:'90%'},
})

const realSize = computed(() => {
    return typeof props.size == "string" ? props.size : `${props.size}px`
})
</script>

<style>
/*.by_drawer .el-drawer__header{*/
/*    padding: 20px!important;*/
/*    margin-bottom: 0px;*/
/*    !*color: var(--el-color-primary);*!*/
/*    !*background-color:var(--el-bg-color);*!*/
/*}*/
/*.by_drawer .el-drawer__body{*/
/*    !*background-color: var(--el-bg-color);*!*/
/*    margin: 20px;*/
/*    border-radius: 10px;*/
/*}*/
</style>